<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="搜索目的地/攻略/游记/问答"
        @search="onsearch"
        @cancel="onCancel"
      />
    </form>

    <div class="mysearch">
        <!-- //模糊搜索 -->
        <p class="mysearchvalue">{{value}}</p>
        <mydetail v-for="item in searchdata" :key="item.id" :item="item"></mydetail>
    </div>

    <div>
        <!-- //分页 -->
        <van-pagination
            v-model="page" 
            :items-per-page="pagesize"
            :total-items="list.length"
            :show-page-size="3"
            force-ellipses
        />
    </div>
  </div>
</template>

<script>
import { getdetaildata } from "@/detail/detaildata.js";
import mydetail from "@/detail/mydetail.vue";
export default{
    components:{
        mydetail,
    },
    data(){
        return{
            //存放的数据
            list:[],
            //输入框的值
            value:"",
            //当前页码
            page:1,
            //每页显示条数
            pagesize:10,
        }
    },
    methods:{
        //跳转到首页
        onCancel(){
            this.$router.push("/home")
        },
        //获取输入框的值
        onsearch(val){
            // var value=event.target.value
            this.value=val
            console.log(this.value)
        },
        //获取数据
        fetchdata(){
            getdetaildata().then((res)=>{
                console.log(res.data)
                this.list=res.data.data
            })
        }
    },
    computed:{
        searchdata(){
            if(!this.value){
                return 
            }else{
                //返回查询到的结果
                return this.list=this.list.filter(item=>item.county.includes(this.value)),this.list.slice((this.page - 1) * this.pagesize, this.page * this.pagesize);
                //按查询到的结果进行分页
                // this.list.slice((this.page - 1) * this.pagesize, this.page * this.pagesize);
            }
        }
    },
    mounted(){
        this.fetchdata()
    }
}
</script>

<style lang="scss" scoped>
.mysearch{
    width: 375px;
    .mysearchvalue{
        font-size: 20px;
        color: #b37012;
        padding-left: 20px;
    }
}

</style>